<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form :form="form" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-item label="字段名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input
                v-decorator="['fieldName',{ rules: [
                  {
                    required: true,
                    message: '请输入字段名',
                  },
                ],}]"
                placeholder="请输入字段名称"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="序号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['fieldSort']" placeholder="请输入序号"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="24" v-if="isShow">
            <a-form-item label="数据类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="list" v-decorator="['fieldType']" :trigger-change="true" dictCode="data_type" placeholder="请选择数据类型，1数字，2字符，3日期，4时间"/>
            </a-form-item>
          </a-col>
          <a-col :span="24" v-if="isShow">
            <a-form-item label="预设值" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag
                type="radio"
                v-decorator="['fieldDefaultSet',{'initialValue':'1'}]"
                :trigger-change="true"
                dictCode="default_value"
                placeholder="请选择项目赋值，1默认值，2数据源"/>
            </a-form-item>
          </a-col>
          <a-col :span="24" v-if="isShow" v-show="form.getFieldValue('fieldDefaultSet')==='1'">
            <a-form-item label="默认值" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['fieldDefault']" placeholder="请输入默认值"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="24" v-if="isShow" v-show="form.getFieldValue('fieldDefaultSet')==='2'">
            <a-form-item label="计算公式" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <!-- <a-textarea v-decorator="['fieldSource']" rows="4" placeholder="请输入计算公式"/> -->
              <j-editor
                v-decorator="['fieldSource',{trigger:'input'}]"
                :toolbar="false"
                :statusbar="false"
                :height="100"
                :iscompute="true"
                @editchange="editchange"/>
            </a-form-item>
            <a-form-item label=" " :colon="false" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <div class="useInfo">
                <strong> 使用说明: </strong>
                <ul class="condition-remark">
                  <li> 1.薪资项、 数字、运算符之间必须使用至少一个
                    <strong class="text-danger"> 空格 </strong> 分隔，输入
                    <strong class="text-danger"> 空格 </strong>
                    后系统会自动格式化输入的内容 </li>
                  <li > 2.支持的运算符
                    <ul class="operator-remark">
                      <li > 数值运算符： <span class="field number-operator"> + </span><span class="field number-operator"> - </span><span class="field number-operator"> * </span><span class="field number-operator"> / </span><span class="field number-operator"> ( </span><span class="field number-operator"> ) </span>
                      </li>
                    </ul><br>
                  </li>
                  <li > 3.示例： <span class="field control"> 薪资项1 </span><span class="field number-operator"> + </span><span class="field control"> 薪资项2 </span><span class="field number-operator"> * </span><span class="field control"> 薪资项3 </span><span class="field number-operator"> + </span><span class="field charachter"> 4 </span><span class="field number-operator"> * </span><span class="field control"> 薪资项5 </span><span class="field number-operator"> / </span><span class="field number-operator"> ( </span><span class="field control"> 薪资项3 </span><span class="field number-operator"> + </span><span class="field control"> 薪资项4 </span><span class="field number-operator"> - </span><span class="field charachter"> 5 </span><span class="field number-operator"> ) </span></li>
                </ul>
              </div>
            </a-form-item>
          </a-col>
          <a-col :span="24" v-if="isShow">
            <a-form-item label="数据格式" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag
                type="list"
                v-decorator="['fieldFormat']"
                :trigger-change="true"
                dictCode="data_format"
                placeholder="请选择数据格式，只针对数字类型，1四舍五入，2舍小取整，3进一取整"/>
            </a-form-item>
          </a-col>
          <a-col :span="24" v-if="isShow">
            <a-form-item label="小数保留位数" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-decorator="['fieldDecimal']" placeholder="请输入小数位" style="width: 100%"/>
            </a-form-item>
          </a-col>

          <a-col :span="24" >
            <a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-editor v-decorator="['fieldRemark',{trigger:'input'}]"/>
            </a-form-item>
          </a-col>
          <a-col v-if="showFlowSubmitButton" :span="24" style="text-align: center">
            <a-button @click="submitForm">提 交</a-button>
          </a-col>
        </a-row>
      </a-form>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import { validateDuplicateValue } from '@/utils/util'
  import JFormContainer from '@/components/jeecg/JFormContainer'
  import JDictSelectTag from '@/components/dict/JDictSelectTag'
  import JEditor from '@/components/jeecg/JEditor'

  export default {
    name: 'SalaryFieldsForm',
    components: {
      JFormContainer,
      JDictSelectTag,
      JEditor
    },
    props: {
      // 流程表单data
      formData: {
        type: Object,
        default: () => {},
        required: false
      },
      // 表单模式：true流程表单 false普通表单
      formBpm: {
        type: Boolean,
        default: false,
        required: false
      },
      // 表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        isShow :true,
        form: this.$form.createForm(this),
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        confirmLoading: false,
        validatorRules: {
        },
        url: {
          add: '/salary/salaryFields/add',
          edit: '/salary/salaryFields/edit',
          queryById: '/salary/salaryFields/queryById'
        }
      }
    },
    computed: {
      formDisabled() {
        if (this.formBpm === true) {
          if (this.formData.disabled === false) {
            return false
          }
          return true
        }
        return this.disabled
      },
      showFlowSubmitButton() {
        if (this.formBpm === true) {
          if (this.formData.disabled === false) {
            return true
          }
        }
        return false
      }
    },
    created () {
      // 如果是流程中表单，则需要加载流程表单data
      this.showFlowData()
    },
    methods: {
      editchange(val) {
        console.log('change', val)
        this.form.setFieldsValue({ fieldSource: val })
      },
      add () {
        this.edit({})
      },
      edit (record) {
        if(record.hasChildren === "1"){
            this.isShow = false;
        }else{
            this.isShow = true;
        }
        this.form.resetFields()
        this.model = Object.assign({}, record)
        this.visible = true
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'fieldName', 'fieldDefault', 'fieldDefaultSet', 'fieldType', 'fieldFormat', 'fieldDecimal', 'fieldSource', 'fieldSort', 'fieldRemark'))
        })
      },
      // 渲染流程表单数据
      showFlowData() {
        if (this.formBpm === true) {
          let params = { id: this.formData.dataId }
          getAction(this.url.queryById, params).then((res) => {
            if (res.success) {
              this.edit(res.result)
            }
          })
        }
      },
      submitForm () {
        const that = this
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true
            let httpurl = ''
            let method = ''
            if (!this.model.id) {
              httpurl += this.url.add
              method = 'post'
            } else {
              httpurl += this.url.edit
              method = 'put'
            }
            let formData = Object.assign(this.model, values)
            console.log('表单提交数据', formData)
            httpAction(httpurl, formData, method).then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            }).finally(() => {
              that.confirmLoading = false
            })
          }
        })
      },
      popupCallback(row) {
        this.form.setFieldsValue(pick(row, 'fieldName', 'fieldDefault', 'fieldDefaultSet', 'fieldType', 'fieldFormat', 'fieldDecimal', 'fieldSource', 'fieldSort', 'fieldRemark'))
      }
    }
  }
</script>
<style>
  .useInfo{
    border: 1px solid #f3f3f3;
    background: #f3f3f3;
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .125rem;
  }
  .condition-remark{
    font-size: 12px;
    margin-left: .25rem!important;
    padding-left: 0;
    list-style: none;
    line-height: 17px;
  }
  .operator-remark{
    /* list-style: none; */
  }
  .text-danger {
    color: #dc3545!important;
  }
  span.field {
  font-size: 12px;
  font-family: "Times New Roman";
  display: inline-block;
  border-radius: 2px;
  height: 18px;
  text-align: center;
  line-height: 18px;
  padding: 0 4px;
}
span.field.charachter {
  color: #a96e34;
}
span.field.number-operator {
  color: #9d86a1;
  padding: 0;
  border: 1px solid #9d86a1;
  width: 18px;
}
span.field.control {
    color: #78889c;
}
</style>
